<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>20210902124邵文杰作业3</title>
    <script src="node_modules\vue\dist\vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="prevImg()">上一张</button>
        <img :src="currentImageSrc" alt="max-width: 100%" >  
        <button @click="nextImg()">下一张</button>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            images: [
                'image/1.jpg',
                'image/2.jpg',
                'image/3.jpg',
                'image/4.jpg',
                'image/5.jpg'
            ],
            currentIndex: 0
        },
        computed: {
            currentImageSrc() {
                return this.images[this.currentIndex];
            }
        },
        methods: {
            nextImg() {
                this.currentIndex = (this.currentIndex + 1) % this.images.length;
            },
            prevImg() {
                this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
            }
        }
    });
</script>
</html>